<template>
    <!-- {{Data}} -->
    <div class="outSide">
        <div class="tip">
            <div>型号：{{ props.pid }}</div>
            <div v-if="type !== 'sys'">置信度(依据历史评测结果)</div>
            <!-- <template v-if="type !== 'sys'">
            </template> -->
        </div>
        <el-table 
            id="thisTableForjson"
            header-cell-class-name="initHeader"
            class="custom-border-table"
            :data="type == 'sys' ? props.Data : transformDataToArray(props.Data)"
            max-height="calc(100vh - 170px)"
            style="width: 100%;"
            v-bind="$attrs"
        >
            <template v-for="(col, index) in (type == 'sys' ? sysCols : packageCols)" :key="index">

                <el-table-column v-if="col.prop == 'level'" :label="col.label" :width="col.width">
                    <template #default="scope">
                        <!-- {{ scope.row[col.prop] }} -->
                        <img v-if="scope.row[col.prop] == '优'" src="@/assets/images/jsonlevel/you.svg" alt="">
                        <img v-if="scope.row[col.prop] == '良'" src="@/assets/images/jsonlevel/liang.svg" alt="">
                        <img v-if="scope.row[col.prop] == '差'" src="@/assets/images/jsonlevel/cha.svg" alt="">
                    </template>
                </el-table-column>
                <el-table-column v-else-if="col.prop === 'pin_number'" :prop="col.prop" :label="col.label" :width="col.width" :sortable="true" :sort-method="handlePinNumberSort">

                </el-table-column>
                <el-table-column v-else :prop="col.prop" :label="col.label" :width="col.width" />

            </template>
        </el-table>
    </div>

</template>

<script setup>
import { ref, computed, watch } from 'vue'

const props = defineProps({
    Data: {
        type: [Array, Object],
        default: () => []
    },
    pid: {
        type: String,
        default: ''
    },
    type: {
        type: String,
        default: () => [
            { prop: 'name', label: '姓名' }
        ]
    }
})

const sysCols = [
    // { prop: 'index', label: '序号' },
    { prop: 'pin_name', label: '管脚定义' },
    { prop: 'pin_number', label: '管脚编号' }
]

const columns = ref()
const tableData = ref()
const packageCols = [
    { prop: 'index', label: '序号' },
    { prop: 'parameter', label: '名称', width: 200 },
    { prop: 'value', label: '值' },
    { prop: 'level', label: '置信度' },
    // { prop: 'order', label: 'order' }
]
watch(() => props.type, (newVal, oldVal) => {
    setTable(newVal)
}, { immediate: true })

const setTable = (type) => {
    if (type == 'sys') {
        columns.value = sysCols
        tableData.value = transformDataToArray(props.Data)
    } else {
        columns.value = packageCols
        tableData.value = props.Data
    }
}

const setPack = (data) => {

    let a = data.map(val, idx => {
        return { ...val, index: idx + 1, }
    })
    console.log("e63", a);

    return a
}

const transformDataToArray = (data) => {
    // console.log("e59", data);

    let aa = Object.entries(data).map(([parameter, details], index) => {

        return {
            // index: index + 1,
            order: details.order ?? 0,
            parameter,
            value: parseFloat(details.value) || details.value,
            level: details.level
        }
    }

    )
    aa = sortByOrder(aa)
    let bb = aa.map((val, idx) => {

        const d1 = { ...val, index: idx + 1 }
        return d1
    })
    // console.log("ea", bb);

    return bb
}

function sortByOrder(arr) {
    return arr.sort((a, b) => {
        // 统一转换为数字比较，处理数字字符串情况
        const orderA = Number(a.order);
        const orderB = Number(b.order);
        return orderA - orderB;
    });
}

const handlePinNumberSort = (a,b) => {
    const target = +a.pin_number - b.pin_number;
    return target
}

</script>
<style scoped>
/* 外侧全包边框 */
.custom-border-table {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    color: #333333;
    font-size: 14px;
}

/* .initHeader{
  background-color: red;

} */
.outSide {
    background-color: #F2F3F5;
    padding: 0px 32px;
    padding-bottom: 32px;
    height: calc(100vh - 120px);
    overflow: auto;

    .tip {
        padding: 12px 0;
        line-height: 20px;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 500;
        color: #333333;
    }
}

.el-table__header {
    background-color:#ebebeb !important;

}

:deep(.custom-border-table .el-table__header th) {
    background-color: #ebebeb !important;
    /* color: white; */
}

/* 清除默认内部边框 */
:deep(.custom-border-table .el-table__cell) {
    border-right: none;
}

/* 行底部边框 */
:deep(.custom-border-table .el-table__body .el-table__cell) {
    border-bottom: 1px solid #dcdfe6;
}

/* 隐藏表头底部边框 */
:deep(.custom-border-table .el-table__header .el-table__cell) {
    border-bottom: none;
}

/* 去除表格伪元素生成的额外边框 */
:deep(.custom-border-table::before),
:deep(.custom-border-table .el-table__border-left-patch) {
    display: none;
}
</style>

<style>
#thisTableForjson {
    .el-table__header {
        tr {
            th {

                background-color: #ebebeb !important;
                color: #333;
            }
        }

    }

    .el-table__row {
        td {
            background-color: #F2F3F5;
            ;
        }

    }
}
</style>